<template>
	<view class="case">
		<u-navbar>
			<view class="slot-wrap">
				<u-search
					placeholder="搜索标题 内容 发布人"
					v-model="searchipt"
					:height="50"
					:action-text="searchipt == '' ? '上传' : '搜索'"
					:input-style="{
						height: '56rpx'
					}"
					:action-style="{
						width: '118rpx',
						height: '56rpx',
						lineHeight: '56rpx',
						backgroundColor: '#FFDB28',
						borderRadius: '60rpx',
						color: '#ffffff'
					}"
					@search="doSearch"
					@custom="doSearch"
				></u-search>
			</view>
		</u-navbar>
		<view class="navbar">
			<view class="nav"><u-subsection :list="list" :current="current" bgColor="#F4F4F4" @change="subchange" active-color="black" button-color="#F4F4F4"></u-subsection></view>
			<u-dropdown :close-on-click-mask="mask" ref="uDropdown" :height="70" activeColor="#292930" @open="openclass" :class="current == 3 ? 'active' : ''">
				<u-dropdown-item :title="title" :isweight="600">
					<view class="slot-content">
						<view class="item-box">
							<view
								class="item"
								v-for="(item, index) in classlist"
								:key="index"
								:style="{
									backgroundColor: item.id == -1 ? '#d7fffe' : '#DFDFDF'
								}"
								:class="[item.active ? 'active' : '']"
								@tap="tagClick(index, item.id)"
							>
								{{ item.name }}
							</view>
							<view style="width: 152rpx;" v-if="classlist.lenght % 2 !== 0"></view>
							<view style="width: 152rpx;" v-if="classlist.lenght % 3 !== 0"></view>
						</view>
					</view>
				</u-dropdown-item>
			</u-dropdown>
		</view>
		<view class="caseul" v-if="caseList.length">
			<block v-for="(v, k) in caseList" :key="k">
				<view class="caseli">
					<u-image :height="468" :src="v.content" @click="gocasseinfo(v)"></u-image>
					<view class="caseinfo">
						<view class="title" @click="gocasseinfo(v)">{{ v.user }}</view>
						<view class="u-flex u-row-between">
							<view class="" style="color: #DFDFDF;" @click="gocasseinfo(v)">{{ v.date }}</view>
							<view class="u-p-b-10" @click="doaddlike(v.id)">
								<u-icon :name="iconname"></u-icon>
								<text class="u-p-l-12">{{ v.zan }}</text>
							</view>
						</view>
					</view>
				</view>
			</block>
			<u-loadmore :status="status" :margin-top="40" :margin-bottom="20" />
		</view>
		<u-empty v-else text="Sorry,暂无数据" mode="data" :marginTop="40"></u-empty>
		<u-back-top :scroll-top="scrollTop" :top="600"></u-back-top>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
export default {
	name: 'haha',
	data() {
		return {
			page: 1,
			max_page: 1,
			status: 'loadmore',
			scrollTop: 0,
			title: '分类',
			current: 0,
			searchipt: '',
			xuhao: '',
			iconname: 'thumb-up', //thumb-up-fill
			list: [
				{
					name: '全部'
				},
				{
					name: '点赞'
				},
				{
					name: '观看'
				}
			],
			mask: true,
			classlist: [
				{
					active: true,
					name: '分类',
					id: -1
				}
			],
			activeColor: '#2979ff',
			caseList: [
				{
					// content: "img.letuilm.com/images/2020-09-15_1600160097_5f608161985e6.png",
					// date: "2020-09-14 16:14:53",
					// title: "",
					// user: "王百顺",
					// view: 109,
					// zan: "0",
					// id:""
				}
			]
		};
	},
	//实例创建完成后被立即调用
	created() {},
	watch: {
		searchipt: function(val) {
			if (val == '') {
				this.getcaselist(this.current + 1, this.searchipt, this.xuhao);
			}
		}
	},
	onLoad(option) {
		this.getclasslist();
		this.getcaselist(1);
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	onReachBottom() {
		this.status = 'loading';
		this.page = ++this.page;
		if (this.max_page < this.page || this.max_page == this.page) {
			this.status = 'nomore';
			return false;
		}
		this.getcaselist(this.current + 1, this.searchipt, this.xuhao, this.page);
	},
	//挂载开始之前被调用
	beforeMount() {},
	onPullDownRefresh() {
		//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
		this.classlist = [
			{
				active: true,
				name: '分类',
				xuhao: -1
			}
		];
		this.getclasslist();
		this.getcaselist(1);
		setTimeout(() => {
			this.$refs.uToast.show({
				title: '刷新成功!',
				type: 'success'
			});
			uni.stopPullDownRefresh(); //停止下拉刷新动画
		}, 1000);
	},
	//初次渲染完成
	onReady() {},
	//全局只触发一次
	onLaunch() {},
	//从后台进入前台
	onShow() {},
	//前台进入后台
	onHide() {},
	methods: {
		doaddlike(id) {
			this.$u.api
				.doaddlike({
					id: id
				})
				.then(res => {
					// console.log(res)
					if (res.code == 200) {
						for (let i in this.caseList) {
							if (this.caseList[i].id == id) {
								this.caseList[i].zan = ++this.caseList[i].zan;
							}
						}
						this.$refs.uToast.show({
							title: '点赞成功!',
							type: 'success'
						});
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'info'
						});
					}
				})
				.catch(err => {
					this.$refs.uToast.show({
						title: err.msg,
						type: 'info'
					});
				});
		},
		getcaselist(sort, searchipt, classid, page) {
			this.$u.api
				.getcaselist({
					sort: sort, //1发布时间，2点赞次数，3观看次数
					search: searchipt == undefined ? '' : searchipt,
					class_id: classid == undefined ? '' : classid,
					page: page == undefined ? 1 : page,
					pagesize: 10
				})
				.then(res => {
					// console.log(res)
					this.max_page = res.data.max_page;
					let arr = res.data.data;
					for (let i in arr) {
						let str = arr[i].content;
						if (str.indexOf('img.letuilm.com') != -1) {
							arr[i].content = str.replace(/img.letui/g, `//img.letui`);
						} else {
							arr[i].content = str.replace(/\/public\/static/g, `//zsxt.letuilm.com/public/static`);
						}
					}
					this.caseList.push(...arr);
					// console.log(this.caseList);
				})
				.catch(err => {
					console.log(err);
				});
		},
		getclasslist() {
			this.$u.api
				.getcaseclass()
				.then(res => {
					// console.log(res);
					let arr = res.data;
					for (let i in arr) {
						arr[i].active = false;
					}
					this.classlist.push(...arr);
				})
				.catch(err => {
					console.log(err);
				});
		},
		gocasseinfo(item) {
			uni.navigateTo({
				url: '/pages/case/caseinfo?item=' + encodeURIComponent(JSON.stringify(item))
			});
		},
		tagClick(index, id) {
			// console.log(index, id);
			this.xuhao = id;
			this.classlist[index].active = !this.classlist[index].active;
			for (let i in this.classlist) {
				if (i == index) {
					this.classlist[i].active = true;
					this.title = this.classlist[i].name;
					this.closeDropdown();
					// console.log('this.current', this.current);
					this.current = 3;
					this.page = 1;
					this.caseList = [];
					this.getcaselist(1, this.searchipt, id);
				} else {
					this.classlist[i].active = false;
				}
			}
		},
		openclass(index) {
			console.log(index);
			// this.current = 5;
		},
		closeDropdown() {
			this.$refs.uDropdown.close();
		},
		doSearch() {
			if (this.searchipt == '') {
				uni.navigateTo({
					url: '/pages/case/uploadcase'
				});
			} else {
				// console.log(this.searchipt);
				this.caseList = [];
				console.log('--------', this.xuhao);
				if (this.xuhao == '') {
					this.getcaselist(this.current + 1, this.searchipt, '');
				} else {
					this.getcaselist(1, this.searchipt, this.xuhao);
				}
			}
		},
		subchange(index) {
			// console.log(index);
			this.current = index;
			this.$refs.uDropdown.close();
			this.xuhao = '';
			this.page = 1;
			this.caseList = [];
			this.getcaselist(index + 1, this.searchipt, '');
		}
	}
};
</script>

<style lang="scss" scoped>
.case {
	background-color: $lt-bg;
	min-height: 100vh;
	.slot-wrap::v-deep {
		display: flex;
		align-items: center;
		flex: 1;
		padding-right: 20rpx;
		.u-content{
			height: 56rpx!important;
		}
	}
	.slot-content {
		background-color: #ffffff;
		padding: 0 24rpx 24rpx 24rpx;

		.item-box {
			// margin-bottom: 50rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			font-size: 28rpx;

			.item {
				// border: 1px solid $u-type-primary;
				color: #787882;
				padding: 8rpx 20rpx;
				border-radius: 100rpx;
				margin-top: 30rpx;
				background-color: #dfdfdf;
			}

			.active {
				color: #292930;
				// background-color: $u-type-primary;
			}
		}
	}
	.navbar::v-deep {
		height: 70rpx;
		.nav {
			width: 568rpx;
			position: absolute;
			// top: var(--status-bar-height) + 44;
			left: 0;
			z-index: 900;
		}
		.u-dropdown__menu__item {
			justify-content: flex-end;
			padding-right: 66rpx;
		}
		.u-dropdown__menu__item__arrow {
			display: none;
		}
		.active {
			.u-dropdown__menu__item__text {
				font-weight: 600;
				color: black !important;
			}
		}
	}
	.caseul {
		.caseli {
			background-color: #ffffff;
			margin-bottom: 20rpx;
			.caseinfo {
				padding: 20rpx 32rpx;
			}
		}
	}
}
</style>
